<template>
  <el-card class="box-card">
    <div slot="header">
      <span>账号列表</span>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 选择 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 账号 -->
      <el-table-column prop="account" label="账号"></el-table-column>
      <!-- 用户组 -->
      <el-table-column prop="userGroup" label="用户组"></el-table-column>
      <!-- 创建时间 -->
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.ctime | formatYMD }}
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button class="edit" size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>

          <!-- 气泡确认框 -->
          <el-popconfirm
            @confirm="handleDelete(scope.row)"
            title="这是一段内容确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block mt20">
      <span class="demonstration"></span>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 批量删除 -->
    <div style="margin-top: 20px">
      <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
      <el-button type="primary" @click="cancelChange">取消选择</el-button>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form class="form" size="small" label-width="80px" :model="formData">
        <el-form-item label="用户名">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="formData.userGroup" placeholder="请选择用户组">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button size="small" type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
//解构接口
import {
  getUserListReq,
  delUserReq,
  editUserReq,
  batchDelUserReq,
} from '@/api/user'

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //id组成的数组
      ids: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,

      dialogFormVisible: false, //编辑弹窗隐藏显示
      //弹窗数据
      formData: {
        id: '',
        account: '',
        userGroup: '',
      },
    }
  },
  //方法
  methods: {
    //获取数据函数
    async getData() {
      //提取数据
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getUserListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {data, total} = res.data
      //数据赋值
      this.total = total
      this.tableData = data

      //如果当前data为[] 且 当前页不等1 就退回上一页获取数据
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },
    //checkbox 选择时候触发
    handleSelectionChange(val) {
      this.ids = val.map(v => v.id)
    },
    //批量删除操作
    handleBatchDel() {
      if (this.ids.length) {
        this.$confirm('此操作将永久删除选中用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            //发送请求
            let res = await batchDelUserReq({ids: this.ids})
            //解构数据
            let {code} = res.data
            //判断
            if (code === 0) {
              //重新拉取数据
              this.getData()
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      } else {
        this.$message.info('没有选中')
      }
    },
    //取消选择
    cancelChange() {
      if (this.ids.length) {
        this.$refs.tableRef.clearSelection()
        this.$message.info('取消成功')
      } else {
        this.$message.info('没有选中')
      }
    },

    //编辑操作 回填
    async handleEdit(row) {
      //把弹窗开启
      this.dialogFormVisible = true
      //数据回填
      this.formData = {...row}
    },
    //确定编辑
    async handleConfirm() {
      //发送请求
      let res = await editUserReq(this.formData)
      //解构数据
      let {code, msg} = res.data
      //判断
      if (code === 0) {
        this.dialogFormVisible = false
        //重新拉取数据
        this.getData()
      }
    },
    //删除操作
    async handleDelete(row) {
      //获取id
      let {id} = row
      //发请求
      let res = await delUserReq({id})
      //解构数据
      let {code} = res.data
      //判断
      if (code === 0) {
        //拉取数据
        this.getData()
      }
    },
    //改变页码
    handleSizeChange(val) {
      //1 拿到当前每页条数 赋值给pageSize
      this.pageSize = val
      //2 拉取数据
      this.getData()
    },
    //改变当前页
    handleCurrentChange(val) {
      //1 拿到当前页码 赋值给currentPage
      this.currentPage = val
      //2 发请求
      this.getData()
    },
  },
  //created 生命周期初始化发请求
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.accountList {
  width: 100%;
  height: 100%;
  background: #fff;
  margin: 20px;
  padding: 15px;
}
.delAll {
  background: #f56c6c;
  border-color: #f56c6c;
  color: white;
}
.cancel {
  background: #409eff;
  border-color: #409eff;
  color: white;
}
.edit {
  margin-right: 10px;
}
</style>
